<template>
  <header class="m-shop-hd">
    <!-- 背景图片 -->
    <img class="bg" :src="require('./img/pg_shop.png')">
    <!-- 搜索框 -->
    <yd-navbar slot="navbar" height=".88rem" bgcolor="rgba(0,0,0,0)" color="#fff" fontsize=".3rem" :fixed="true">
      <yd-navbar-back-icon slot="left" color="#fff" @click.native="$router.back()"></yd-navbar-back-icon>
      <div slot="center" class="m-srh-box" @click="$router.push('/search')">
        <yd-icon slot="left" name="search" size=".3rem" color="#999"></yd-icon>
        <span slot="left">商品</span>
      </div>
    </yd-navbar>
    <!-- 商家信息 -->
    <div class="shop-name">
      <div class="left">
        <div class="img-box">
          <img class="minimg" :src="storeInfo.storeLogo ? storeInfo.storeLogo : require('../../assets/icon_avatar.png')">
        </div>
        <span class="name">{{storeInfo.storeName}}</span>
      </div>
      <div class="collect" @click="onCollectStore">
        <yd-icon :name="storeInfo.isCollect == '1' ? 'like' : 'like-outline'" size=".4rem"></yd-icon>
        <br>
        {{storeInfo.isCollect == '1' ? '已收藏' : '收藏'}}
      </div>
    </div>
  </header>
</template>

<script>
  import { apiShopInfo } from 'js/api'

  export default {
    props: {
      id: [String, Number]
    },
    data() {
      return {
        storeInfo: {}  
      }
    },
    created() {
      apiShopInfo(Number(this.id), this.$store.getters.token).then(data => {
        this.storeInfo = data || {} 
      })
    },
    methods: {
      onCollectStore() {
        this.$store.dispatch('fetchCollectShop', {
          token: this.$store.getters.token,
          id: this.id,
          callback: data => {
            if (data == 0) {
              this.$toast('收藏成功')
              this.storeInfo.isCollect = 1
            } else if (data == 1) {
              this.$toast('取消收藏')
              this.storeInfo.isCollect = 0
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  @import '../../scss/_mixin.scss';
  .m-shop-hd {
    position: relative;
    height: 2.4rem;
    overflow: hidden;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .m-srh-box {
      position: absolute;
      left: 1.2rem;
      right: 1.2rem;
      height: .5rem;
      padding-left: .3rem;
      line-height: .5rem;
      border-radius: .5rem;
      color: #999;
      background: rgba(255, 255, 255, .8);
    }
    .shop-name {
      @include flex();
      position: absolute;
      left: 0;
      right: 0;
      bottom: .2rem;
      height: .8rem;
      padding: 0 .3rem;
      overflow: hidden;
      color: #fff;
      .img-box {
        display: inline-block;
        width: .6rem;
        height: .6rem;
        vertical-align: middle;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        @include cutoff();
        display: inline-block;
        max-width: 4rem;
        margin-left: .2rem;
      }
      .collect {
        text-align: center;
      }
    }
  }
</style>